<template>
	<view :class="sticky" :style="{'padding-top': top + 'rpx'}">
		<slot></slot>
	</view>
</template>

<script>
	/** 
	 * 吸顶组件，默认吸顶
	 */
	export default {
		name: 'sticky',
		data() {
			return {};
		},
		computed: {
			//动态计算锁定表头样式
			sticky() {
				let stickyClass = '';
				switch (this.$settings.platform) {
					case 'H5':
						stickyClass = 'sticky-H5';
						break;
					case 'H5-WEIXIN':
						stickyClass = 'sticky-H5-WEIXIN';
						break;
					case 'MP-WEIXIN':
						stickyClass = 'sticky-MP-WEIXIN';
						break;
					case 'APP':
						stickyClass = 'sticky-APP';
						break;
				}
				return stickyClass;
			},
			//动态计算表头固定值
			top() {
				let top = '';
				switch (this.$settings.platform) {
					case 'H5':
					case 'H5-WEIXIN':
						top = '0';
						break;
					case 'MP-WEIXIN':
						top = 0;
						break;
					case 'APP':
						top = this.CustomBar;
						break;
				}
				return this.isCustomPaddingTop ? this.customPaddingTop : top;
			},
		},
		//
		props: {
			//是否自定义距离顶部距离
			isCustomPaddingTop: {
				type: Boolean,
				default: false
			},
			//自定义距离顶部距离
			customPaddingTop: {
				type: Number,
				default: 0
			}
		},
	};
</script>

<style lang="scss" scoped>
	//基础样式
	.sticky {
		background: #fff;
		position: sticky;
		z-index: 10;
		top: 0;
	}

	//浏览器中H5
	.sticky-H5 {
		@extend .sticky;
	}

	//微信中H5页面
	.sticky-H5-WEIXIN {
		@extend .sticky;
	}

	//微信小程序
	.sticky-MP-WEIXIN {
		@extend .sticky;
	}

	//App
	.sticky-APP {
		@extend .sticky;
	}
</style>